<style scoped lang="scss">
	.xy-list-item {
		position:relative;
		background: #ffffff;
		display: flex;
		min-height: 42px;
		justify-content: space-between;
		align-items: center;
		padding: 0px 8px;
		.check {
			/deep/ uni-checkbox .uni-checkbox-input {
				color: $uni-color-primary !important;
				border-radius: 20px !important;
				&:hover,
				&.uni-checkbox-input-checked {
					border-color: $uni-color-primary;
				}
			}
		}
		.check-noborder {
			/deep/ uni-checkbox .uni-checkbox-input {
				border: 0px !important;
			}
		}
		.left {
			display: flex;
			align-items: center;
			position: relative;
			line-height: 1;
			padding-right: 5px;
			.icon {
				font-size: 18px;
				margin-right: 5px;
			}
			.image {
				width: 100px;
				height: 72px;
				&.round {
					width: 72px;
					height: 72px;
					border-radius: 50%;
				}
			}
		}
		.content {
			height: 100%;
			flex: 1;
			align-self: center;
			.title {
				padding: 8px 0;
				font-size: 15px;
				color: #262b3a;
				display: flex;
				justify-content: space-between;
				.right {
					font-size: 12px;
					transform: scale(0.9);
					color: $font-color-light;
				}
			}
			.info {
				display: flex;
				justify-content: space-between;
				.left {
					font-size: 14px;
					color: $font-color-light;
				}
				.right {
					font-size: 12px;
					color: $font-color-light;
				}
			}
		}
		.right {
			display: flex;
			position: relative;
			align-items: center;
			height: 100%;
			.current {
				font-size: 12px;
				color: $font-color-light;
			}
			.more {
				margin-right: -5px;
				font-size: 18px;
				color:$font-color-light;
			}
		}
		&.t-link {
			.content {
				.title {
					.left {
						uni-text {
							font-size: 15px !important;
							font-weight: 400 !important;;
							color: #303133 !important;;
						}
					}
				}
			}
		}
		&.t-media {
			padding: 8px;
			.content {
				.title {
					padding: 0;
				}
			}
		}
		&.t-button {
			.content {
				width: auto;
				.info {
					display: none;
				}
			}
		}
		&.t-input {
			.content {
				.title {
					.left {
						min-width: 40px;
					}
					.right {
						flex: 1;
						font-size: 15px;
						transform: scale(1);
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						display: block;
						width: 100px;
					}
				}
			}
		}
	}
</style>
<template>
	<label @click="handleClick" class="xy-list-item b-b" :class="'t-' + type">
		<view class="check" v-if="selectType == 'checkbox'">
			<checkbox :value="value" :checked="checked" />
		</view>
		<view class="left" v-if="icon || image">
			<slot name="image">
				<view>
					<text class="icon text-gray" :class="icon" :style="{color: iconColor}"></text>
				</view>
				<view v-if="image">
					<xy-image :src="image" class="image" :class="imageSharp" mode="scaleToFill"></xy-image>
				</view>
				<slot name="tag">
					<view class="tag"></view>
				</slot>
			</slot>
		</view>
		<view class="content" :style="contentStyle">
			<view class="title">
				<slot name="title">
					<view class="left">
						<text :style="{'font-size': titleFs}">{{title}}</text>
					</view>
					<view class="right">
						<slot name="titleRight">
							<text>{{titleRight}}</text>
						</slot>
					</view>
				</slot>
			</view>
			<view class="info">
				<slot name="info">
					<view class="left p-t-xs" v-if="info">
						<text>{{info}}</text>
					</view>
					<view class="right p-t-xs" v-if="infoRight">
						<slot name="infoRight">
							<text>{{infoRight}}</text>
						</slot>
					</view>
				</slot>
			</view>
		</view>
		<view class="right">
			<view class="current">
				<slot name="current">
					<text>{{current}}</text>
				</slot>
			</view>
			<view v-if="more" class="more">
				<slot name="more">
					<text :class="more"></text>
				</slot>
			</view>
		</view>
	</label>
</template>
<script>
export default {
    name: 'xyListItem',
    props: {
		value: {
			type: [String, Number],
			default: ''
		},
		selectType: {
			type: String,
			default: ''
		},
		checked: {
			type: Boolean,
			default: false
		},
		uid: {
			type: Number,
			default: 0
		},
		needLogin: {
			type: Boolean,
			default: false
		},
		url: {
			type: String,
			default: ''
		},
		loginUrl: {
			type: String,
			default: '/pages/core/user/login'
		},
		type: {
			type: String,
			default: ''
		},
		icon: {
			type: String,
			default: ''
		},
		iconColor: {
			type: String,
			default: ''
		},
		image: {
			type: String,
			default: ''
		},
		imageSharp: {
			type: String,
			default: ''
		},
		title: {
			type: String,
			default: ''
		},
		titleFs: {
			type: String,
			default: '14px'
		},
		contentStyle: {
			type: String,
			default: ''
		},
		info: {
			type: String,
			default: ''
		},
		current: {
			type: String,
			default: ''
		},
		more: {
			type: String,
			default: ''
		},
		titleRight: {
			type: String,
			default: ''
		},
		infoRight: {
			type: String,
			default: ''
		}
    },
    data() {
        return {
        }
    },
    created: function () {
    },
    methods: {
		handleClick() {
			if (this.url) {
				if (this.needLogin && !this.uid) {
					uni.navigateTo({
						url: this.loginUrl
					});
				} else {
					uni.navigateTo({
						url: this.url
					});
				}
			} else {
				this.$emit('click');
			}
		}
    }
}
</script>
